<template>
  <div class="invite-page">
    <!-- 背景容器 -->
    <div class="bg-container">
      <img src="@/assets/bg.png" alt="" class="bg-img" />
      <!-- 主要内容区域 -->
      <div class="main-content">
        <!-- 特色介绍 -->
        <div class="features">
          <div class="feature-item">
            <h3>一站式解决</h3>
          </div>

          <div class="feature-row">
            <span class="feature-text">企业用工</span>
            <span class="separator">|</span>
            <span class="feature-text">零工找活</span>
          </div>

          <div class="feature-item">
            <h3>多样化工种类型</h3>
          </div>

          <div class="feature-row">
            <span class="feature-text">小时工</span>
            <span class="separator">|</span>
            <span class="feature-text">临时工</span>
          </div>

          <div class="feature-item">
            <h3>多样化结算模式</h3>
          </div>

          <div class="feature-row">
            <span class="feature-text">完工结</span>
            <span class="feature-text">日结</span>
            <span class="feature-text">周结</span>
            <span class="feature-text">月结</span>
          </div>
        </div>

        <!-- 平台介绍 -->
        <div class="platform-intro">
          <p class="intro-text">即刻加入</p>
          <p class="platform-name">钞能力搬运平台</p>
        </div>
      </div>

      <!-- 底部按钮区域 -->
      <div class="bottom-section">
        <div class="button-container">
          <div class="button-item">
            <van-button class="btn-publish" size="large" @click="goToPublish"> 发布用工订单 </van-button>
            <div class="super-small-text-container description">立即跳转”钞能力搬运"小程序，登录后立即获得10元代金券</div>
          </div>
          <div class="button-item">
            <van-button class="btn-register" size="large" @click="goToRegister"> 注册工人接单 </van-button>
            <div class="super-small-text-container description">立即跳转”钞能力搬运“注册页面，登录后立即获得10元增值券</div>
          </div>
        </div>

        <!-- 底部说明文字 -->
        <div class="bottom-text">
          <p class="disclaimer-text super-small-text-container">
            本宣传物料所载信息仅供参考，不构成任何形式的承诺或保证。我们已尽力确保信息的准确性和完整性，但不对因使用本宣传物料所引起的任何直接或间接损失承担责任。最终解释权归钞能力搬运平台所有。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import requestCenter from "../../api/requestCenter";
const router = useRouter();
const route = useRoute();

// 邀请码
const inviteCode = ref("");
const Scheme = ref("");

onMounted(() => {
  // 从URL参数中获取邀请码
  inviteCode.value = route.query.code || "";
  console.log("邀请码:", inviteCode.value);
  getWxConfig()
  generateScheme()
});

// 跳转到发布页面
const generateScheme = async () => {
  try {
    // 这里应该是从你的后端API获取配置
    // 实际项目中，你需要替换为真实的API调用    
    let wxconfigParams = {path: '/pages/tabbar/home',query:'888',isExpire:false}
    let wxconfig = await requestCenter.get("app-api/member/auth/generateScheme",wxconfigParams)
    
     Scheme.value = wxconfig.data;
    
    console.log(Scheme.value)
  } catch (error) {
    console.error('获取配置失败:', error);    
  }
};
// 获取微信配置
const getWxConfig = async () => {
  try {
    // 这里应该是从你的后端API获取配置
    // 实际项目中，你需要替换为真实的API调用    
    let wxconfigParams = {url: encodeURIComponent(window.location.href)}
    let wxconfig = await requestCenter.get("app-api/member/auth/wxconfig",wxconfigParams)
    
    const configData = await wxconfig.data;
    
    // 初始化微信配置
    //initWxConfig(configData);
  } catch (error) {
    console.error('获取配置失败:', error);    
  }
};
// 初始化微信配置
const initWxConfig = (configData) => {
  console.log(configData)
  wx.config({
    debug: false, // 生产环境建议关闭调试模式
    appId: configData.appId,
    timestamp: configData.timestamp,
    nonceStr: configData.nonceStr,
    signature: configData.signature,
    jsApiList: [
      'launchMiniProgram' // 需要使用的JS-SDK功能
    ]
  });
  
  wx.ready(() => {
   
  });
  wx.error((error) => {
    console.error('微信配置失败:', error);    
  });
};
// 跳转到小程序
const goToPublish1 = () => {
console.log("sfs",wx)

  // 调用微信JS-SDK跳转到小程序
  wx.launchMiniProgram({
    targetAppId: 'wxbb21ce8d6eeeecc7', // 替换为你要跳转的小程序appId
    path: '/pages/tabbar/home', // 跳转到小程序的路径
    envVersion: 'release', // release-正式版, trial-体验版, develop-开发版
    success: (res) => {
      console.log('跳转成功', res);              
    },
    fail: (error) => {
      console.error('跳转失败', error);              
    }
  });
};
// 跳转到小程序
const goToPublish = () => {


   // 从后端获取URL Scheme（实际项目中需要通过API调用）
    const schemeUrl = Scheme.value;
    
    // 尝试跳转
    window.location.href = schemeUrl;
};
// 跳转到注册页面
const goToRegister = () => {
  router.push({
    path: "/register",
    query: {
      code: inviteCode.value,
    },
  });
};
</script>

<style lang="less" scoped>
.invite-page {
  min-height: 100vh;
  background: linear-gradient(#d83649, #87302c);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.bg-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  position: relative;
}

.bg-img {
  margin-top: 100px;
  width: 90%;
  height: 100%;
  object-fit: cover;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.features {
  color: white;
  margin-bottom: 60px;

  .feature-item {
    margin: 30px 0;

    h3 {
      font-size: 48px;
      font-weight: bold;
      margin: 0;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
  }

  .feature-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 20px 0;

    .feature-text {
      font-size: 44px;
      font-weight: 500;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .separator {
      font-size: 44px;
      font-weight: 300;
      opacity: 0.8;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
  }
}

.platform-intro {
  color: white;
  margin-bottom: 40px;

  .intro-text {
    font-size: 42px;
    margin: 0 0 10px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }

  .platform-name {
    font-size: 42px;
    font-weight: bold;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
}

.bottom-section {
  margin-top: auto;
  padding: 0 40px 40px;
}

.button-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-bottom: 120px;

  .button-item {
    flex: 1;

    .description {
      width: 125%;
      margin-top: 10px;
      color: #fff;
      font-weight: bold;
      text-align: center;
    }
  }

  .btn-publish,
  .btn-register {
    height: 100px;
    border-radius: 40px;
    font-size: 40px;
    font-weight: bold;
    border: none;
  }

  .btn-publish {
    background: #40b34f;
    color: white;

    &:active {
      background: #40b34f;
    }
  }

  .btn-register {
    background: #40b34f;
    color: white;

    &:active {
      background: #2f855a;
    }
  }
}

.bottom-text {
  .disclaimer-text {
    width: 125%;
    color: #cfbdbc;
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
  }
}
</style>
